<template>
  <div class="app-container">
    <div class="cardBox">
      <el-row :gutter="20">
        <el-form :inline="true" class="search-form" label-width="90px">
          <el-col :span="19">
            <el-form-item label="商户Id">
              <el-input
                :maxlength="20"
                v-model="searchForm.mer_id"
                class="marginBottom"
                placeholder="请输入订单编号"
                clearable
              />
            </el-form-item>
            <el-form-item label="订单编号">
              <el-input
                :maxlength="20"
                v-model="searchForm.mer_order_no"
                class="marginBottom"
                placeholder="请输入订单编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="5" style="margin: 5px 0; text-align: right">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resettingWay"
                >重置</el-button
              >
              <!-- <el-button
                v-if="!searchDisplay"
                type="warning"
                icon="el-icon-caret-bottom"
                @click="searchDisplay = true"
                >展开</el-button
              >
              <el-button
                v-else
                type="warning"
                icon="el-icon-caret-top"
                @click="searchDisplay = false"
                >收起</el-button
              > -->
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div style="margin-top: 20px" class="cardBox">
      <el-row class="marginBottom" :gutter="20" style="display: flex">
        <el-col :span="20">
          <el-button @click="pathWay" icon="el-icon-tickets" type="primary"
            >售后订单</el-button
          >
        </el-col>
        <el-col :span="24" style="float: right">
          <div class="right-panel el-button-group">
            <el-button
              class=""
              icon="el-icon-refresh"
              size="mini"
              @click="resettingWay"
            ></el-button>
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  class=""
                  icon="el-icon-s-operation"
                  size="mini"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            v-loading="loading"
            highlight-current-row
            :data="orderList"
            style="width: 100%"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="tableTheadOptions[fruit].label == '支付方式'">
                  <el-tag
                    size="mini"
                    v-show="scope.row.pay_type == item.tag_value"
                    v-for="(item, index) in payTypeList"
                    :key="index"
                    >{{ item.tag_name }}</el-tag
                  >
                </div>
                <div v-else-if="tableTheadOptions[fruit].label == '支付状态'">
                  <el-tag type="danger" size="mini" v-if="scope.row[fruit] == 1"
                    >未支付</el-tag
                  >
                  <el-tag size="mini" v-else>已支付</el-tag>
                </div>
                <div v-else-if="tableTheadOptions[fruit].label == '售后状态'">
                  <el-tag size="mini" v-if="scope.row[fruit] == 1"
                    >无售后信息</el-tag
                  >
                  <el-tag size="mini" v-else>售后中</el-tag>
                </div>
                <div
                  v-else-if="tableTheadOptions[fruit].label == '商品图片'"
                  style="width: 40px; height: 40px; margin: 0 auto"
                >
                  <el-image
                    :src="scope.row[fruit]"
                    :preview-src-list="[scope.row[fruit]]"
                  />
                </div>
                <span v-else>
                  {{ scope.row[fruit] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="订单状态"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag size="mini" type="warning" v-if="scope.row.status == 1"
                  >待支付</el-tag
                >
                <!-- <el-tag size="mini" v-if="scope.row.status == 2">待发货</el-tag>
                <el-tag size="mini" v-if="scope.row.status == 3">待收货</el-tag> -->
                <el-tag size="mini" type="success" v-if="scope.row.status == 4"
                  >已完成</el-tag
                >
                <el-tag size="mini" type="danger" v-if="scope.row.status == 5"
                  >已取消</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              min-width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="goodsDeteil(scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row style="text-align: right; margin-top: 20px">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.count"
          @pagination="getListWay"
        />
      </el-row>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="订单信息"
      :visible.sync="orderDialog"
      width="800px"
    >
      <div style="position: relative" v-loading="orderDialogLoading">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="商户Id">
            {{ orderDetail.id }}
          </el-descriptions-item>
          <el-descriptions-item label="订单编号">
            {{ orderDetail.mer_order_no }}
          </el-descriptions-item>
          <el-descriptions-item label="用户名字">
            {{ orderDetail.user_name }}
          </el-descriptions-item>
          <el-descriptions-item label="用户电话">
            {{ orderDetail.user_phone }}
          </el-descriptions-item>
          <el-descriptions-item label="负责人常驻地址">
            {{ orderDetail.user_address }}
          </el-descriptions-item>
          <el-descriptions-item label="总运费">
            {{ orderDetail.total_freight_price }}
          </el-descriptions-item>
          <el-descriptions-item label="总金额">
            {{ orderDetail.total_price }}
          </el-descriptions-item>
          <el-descriptions-item label="支付金额">
            {{ orderDetail.pay_price }}
          </el-descriptions-item>
          <el-descriptions-item label="优惠券ID">
            {{ orderDetail.coupon_id }}
          </el-descriptions-item>
          <el-descriptions-item label="优惠券金额">
            {{ orderDetail.coupon_price }}
          </el-descriptions-item>
          <el-descriptions-item label="支付状态">
            <el-tag size="mini" type="danger" v-if="orderDetail.pay_status == 1"
              >未支付</el-tag
            >
            <el-tag size="mini" type="success" v-else>已支付</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="支付时间">
            {{ orderDetail.pay_time }}
          </el-descriptions-item>
          <el-descriptions-item label="支付方式">
            <el-tag
              size="mini"
              v-show="orderDetail.pay_type == item.tag_value"
              v-for="(item, index) in payTypeList"
              :key="index"
              >{{ item.tag_name }}</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag size="mini" type="warning" v-if="orderDetail.status == 1"
              >待支付</el-tag
            >

            <el-tag size="mini" type="success" v-if="orderDetail.status == 4"
              >已完成</el-tag
            >
            <el-tag size="mini" type="danger" v-if="orderDetail.status == 5"
              >已取消</el-tag
            >
          </el-descriptions-item>
          <el-descriptions-item label="售后状态">
            <el-tag size="mini" v-if="orderDetail.fefund_status == 1"
              >无售后信息</el-tag
            >
            <el-tag size="mini" v-else>售后中</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="退款记录ID">
            {{ orderDetail.fefund_bind_id }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag size="mini" v-if="orderDetail.type == 1">正常商品</el-tag>
            <el-tag size="mini" v-if="orderDetail.type == 2">正常商品</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="商户ID">
            {{ orderDetail.mer_id }}
          </el-descriptions-item>
          <el-descriptions-item label="后台操作管理员ID">
            {{ orderDetail.admin_id }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ orderDetail.created_at }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ orderDetail.remark }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions
          v-for="(item, index) in orderDetail.order_detail
            ? orderDetail.order_detail
            : []"
          :key="index"
          style="margin-top: 20px"
          title="快递信息"
          :column="3"
          border
        >
          <el-descriptions-item label="商户Id">
            {{ item.id }}
          </el-descriptions-item>
          <el-descriptions-item label="订单ID">
            {{ item.mer_order_id }}
          </el-descriptions-item>
          <el-descriptions-item label="商品名称">
            {{ item.product_name }}
          </el-descriptions-item>
          <el-descriptions-item label="商品价格">
            {{ item.product_price }}
          </el-descriptions-item>
          <el-descriptions-item label="商品数量">
            {{ item.product_num }}
          </el-descriptions-item>
          <el-descriptions-item label="快递名称">
            {{ item.delivery_name }}
          </el-descriptions-item>
          <el-descriptions-item label="发货类型">
            {{ item.delivery_type }}
            <el-tag size="mini" v-if="item.delivery_type == 1">快递</el-tag>
            <el-tag size="mini" v-if="item.delivery_type == 2">物流</el-tag>
            <el-tag size="mini" v-if="item.delivery_type == 3">自提</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="快递单号">
            {{ item.delivery_number }}
          </el-descriptions-item>
          <el-descriptions-item label="运费金额">
            {{ item.freight_price }}
          </el-descriptions-item>
          <el-descriptions-item label="选品规格ID">
            {{ item.mgpsl_id }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ orderDetail.created_at }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderDialog = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMerchantOrderList,
  getMerchantOrderDetail,
} from "@/api/merchant/index";
import { getDictionaryTypeList } from "@/api/index";
const tableTheadOption = {
  id: {
    label: "商户ID",
    field: "id",
  },
  mer_order_no: {
    label: "订单编号",
    field: "mer_order_no",
  },
  created_at: {
    label: "下单时间",
    field: "created_at",
  },
  pay_time: {
    label: "支付时间",
    field: "pay_time",
  },
  mer_name: {
    label: "商户名称",
    field: "mer_name",
  },
  goods_name: {
    label: "商品名称",
    field: "goods_name",
  },
  goods_image: {
    label: "商品图片",
    field: "goods_image",
  },
  purchase_num: {
    label: "采购数量",
    field: "purchase_num",
  },
  coupon_unit: {
    label: "提货价",
    field: "coupon_unit",
  },
  pay_price: {
    label: "支付金额",
    field: "pay_price",
  },
  user_phone: {
    label: "用户手机号",
    field: "user_phone",
  },
  user_address: {
    label: "用户地址",
    field: "user_address",
  },
  total_freight_price: {
    label: "总运费",
    field: "total_freight_price",
  },
  total_price: {
    label: "总金额",
    field: "total_price",
  },
  pay_status: {
    label: "支付状态",
    field: "pay_status",
  },
  pay_type: {
    label: "支付方式",
    field: "pay_type",
  },
  refund_status: {
    label: "售后状态",
    field: "refund_status",
  },
  remark: {
    label: "备注",
    field: "remark",
  },
};

const allTableThead = [
  "id",
  "mer_order_no",
  "created_at",
  "pay_time",
  "mer_name",
  "goods_name",
  "goods_image",
  "purchase_num",
  "coupon_unit",
  "pay_price",
  "user_phone",
  "user_address",
  "total_freight_price",
  "total_price",
  "pay_status",
  "pay_type",
  "refund_status",
  "remark",
];
const defaultTableThead = [
  "id",
  "mer_order_no",
  "created_at",
  "pay_time",
  "mer_name",
  "goods_name",
  "goods_image",
  "purchase_num",
  "coupon_unit",
  "pay_status",
  "pay_type",
  "refund_status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchDisplay: false,
      searchForm: {
        page: 1, //分页页码，数字类型
        count: 10, //每页数量
        mer_order_no: "",
        mer_id: "",
      },
      orderList: [],
      total: 0,
      // 支付类型列表
      payTypeList: [],
      // 订单详情
      orderDialog: false,
      orderDialogLoading: false,
      orderDetail: {},
    };
  },
  created() {
    this.loading = true;
    getDictionaryTypeList({ type: "pay_type" }).then((res) => {
      this.payTypeList = res.data;
      this.getListWay();
    });
  },
  methods: {
    getListWay() {
      this.loading = true;
      getMerchantOrderList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.orderList = res.data.list;
        this.total = res.data.total;
        console.log(this.orderList);
      });
    },
    // 重置搜索表单
    resettingWay() {
      this.searchForm = {
        page: 1, //分页页码，数字类型
        count: 10, //每页数量
        mer_order_no: "", //订单编号
        user_name: "", //用户名字
        user_phone: "", //用户电话
        pay_status: "", //支付状态(1.未支付,2.已支付)
        pay_type: "", //支付方式
        status: "", //状态
        type: "", //类型(1.正常商品,2.活动商品)
        mer_id: "", //商户ID
      };
    },
    goodsDeteil(row) {
      this.orderDialog = true;
      this.orderDialogLoading = true;
      getMerchantOrderDetail({ mer_id: row.mer_id, id: row.id }).then((res) => {
        this.orderDialogLoading = false;
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.orderDetail = res.data;
      });
    },
    pathWay() {
      this.$router.push("/merchant/order/afterpurchase");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>